<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Basic Layout - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="./themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="./themes/icon.css">
	<script type="text/javascript" src="./jquery.min.js"></script>
	<script type="text/javascript" src="./jquery.easyui.min.js"></script>
</head>

<body>
	<div class="easyui-layout" data-options="fit:true">
		<div data-options="region:'north'" style="height:50px"></div>
		<div data-options="region:'south',split:true" style="height:50px;"></div>
		<div data-options="region:'west',split:true" title="West" style="width:200px;">
          
			<div class="easyui-accordion" data-options="fit:true">
				<div title="快捷菜单" data-options="iconCls:'icon-application-cascade'" style="padding:5px;">
					<ul class="easyui-tree wu-side-tree">
						<li iconCls="icon-chart-organisation">
							<a href="javascript:void(0)" data-icon="icon-chart-organisation" data-link="component/user.html">
								用户管理
							</a>
						</li>
						<li iconCls="icon-chart-organisation">
							<a href="javascript:void(0)" data-icon="icon-chart-organisation" data-link="component/cate.html">
								分类管理
							</a>
						</li>
						<li iconCls="icon-chart-organisation">
							<a href="javascript:void(0)" data-icon="icon-chart-organisation" data-link="component/product.html">
								产品管理
							</a>
						</li>
						<li iconCls="icon-chart-organisation">
							<a href="javascript:void(0)" data-icon="icon-chart-organisation" data-link="component/news.html">
								新闻管理
							</a>
						</li>
					</ul>
				</div>
				<div title="快捷菜单" data-options="iconCls:'icon-application-cascade'" style="padding:5px;">
					<ul class="easyui-tree wu-side-tree">
						<li iconCls="icon-chart-organisation">
							<a href="javascript:void(0)" data-icon="icon-chart-organisation" data-link="temp/layout-2.html" iframe="0">菜单导航</a>
						</li>
						<li iconCls="icon-users">
							<a href="javascript:void(0)" data-icon="icon-users" data-link="temp/layout-1.html" iframe="0">用户管理</a>
						</li>
						<li iconCls="icon-user-group">
							<a href="javascript:void(0)" data-icon="icon-user-group" data-link="temp/layout-3.html" iframe="0">角色管理</a>
						</li>
						<li iconCls="icon-book">
							<a href="javascript:void(0)" data-icon="icon-book" data-link="temp/layout-3.html" iframe="0">数据字典</a>
						</li>
						<li iconCls="icon-cog">
							<a href="javascript:void(0)" data-icon="icon-cog" data-link="temp/layout-3.html" iframe="0">系统参数</a>
						</li>
						<li iconCls="icon-application-osx-error">
							<a href="javascript:void(0)" data-icon="icon-application-osx-error" data-link="temp/layout-3.html" iframe="0">操作日志</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
			<div id="tt" class="easyui-tabs" data-options="fit:true">
				<div title="首页" data-options="href:'./component/first.html'"></div>
			</div>
		</div>
	</div>
	<script>
		$(function () {
			$('.wu-side-tree a').bind('click', function () {
				var title = $(this).text();
				var url = $(this).attr('data-link');
				addTab(title, url);
			})
		})
		
		function addTab(title, href) {
			var content = '<iframe style="width:100%;height:100%" frameborder="0" src="' + href + '"></iframe>';
			var tabPanel = $("#tt");
			title = title.trim();
			if (!tabPanel.tabs('exists', title)) {
				tabPanel.tabs('add', {
					title: title,
					content: content,
					fit: true,
					closable: true
				})
			}else{
				$('#tt').tabs('select', title);
		        var selTab = $('#tt').tabs('getSelected');
		        var url = $(selTab.panel('options').content).attr('src');     
		        $('#tt').tabs('update', {
		            tab: selTab,
		            options: {
		                content:content
		            }
		        })
			}
		}
	
	</script>

</body>

</html>